<template>
<div class=''>
    <Header title="分类"/>
    <!-- 商品分标签展示 ，在外层判断v-if 而不是 和v-for在一个标签里面使用 -->
    <template v-if="goodSectionList">
	    <GoodSection v-for="( goods, index ) in goodSectionList" 
	                :goodList=goods
	                :key=index>
	    </GoodSection>
	</template>
</div>
</template>

<script>
import { reactive } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import Header from "../components/Header.vue";
import GoodSection from "../components/GoodSection.vue"
import { getGoosByTag } from "../api/goods";
export default {
  components: {
        Header,
        GoodSection
    },
   setup() {
      const goodSectionList = reactive([])
      onMounted(()=>{
            getGoodList()
        })

        /**
         * 获取商品列表
         */
        function getGoodList(){
            const goodTags = ["内衣", "汽车", "手机"]
            const allPromise = goodTags.map(function (tag) {
                return getGoosByTag(tag)
            })
            //同步等待上面的结果都返回
            Promise.all(allPromise).then((res) => {
                goodSectionList.push(res[0].result.list)//内衣
                goodSectionList.push(res[1].result.list)//汽车
                goodSectionList.push(res[2].result.list)//手机
            }).catch((error) => {
                console.log(error)
            })
            
        }
        return {
            goodSectionList
        }
   },
}
</script>
<style  scoped>

</style>